<template>
	<div class="backgroundcolor">
		<div class="box">
			<!-- 导航按钮 -->
			<navs></navs>

			<!-- 轮播图 -->
			<div class="banner">
				<div class="imgs">
					<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
						<van-swipe-item v-for="(item, index) in imgs" :key="index">
							<img :src="item.Image" alt="" />
						</van-swipe-item>
					</van-swipe>
				</div>
			</div>

			<!-- 推荐歌单 -->
			<div class="remLists">
				<div class="title">
					<p>推荐歌单</p>
					<router-link tag="div" class="new" to="/recommend/playlistMore">
						更多&gt;
					</router-link>
				</div>

				<div class="content">
					<ul>
						<div class="swiper-container swiper-container-01">
							<div class="swiper-wrapper">
								<li class="swiper-slide" v-for="item in res" :key="item.id">
									<router-link :to="'/recommend/playlistMoreSingle?id=' + item.id">
										<div class="img">
											<img :src="item.Image" alt="" />
										</div>
										<p>{{ item.Info }}</p>
										<!-- <span><i class="iconfont icon-icon-headset"></i>{{ item.playCount | playCountData }}</span> -->
									</router-link>
								</li>
							</div>
							<!-- <div class="swiper-pagination swiper-pagination-01"></div> -->
						</div>
					</ul>
				</div>
			</div>

			<!-- 新碟上架 -->
			<div class="remLists">
				<div class="title">
					<p>新碟上架</p>
					<router-link tag="div" class="new" to="/recommend/newDiscMore">
						更多&gt;
					</router-link>
				</div>

				<div class="album">
					<ul>
						<div class="swiper-container swiper-container-02">
							<div class="swiper-wrapper">
								<li class="swiper-slide" v-for="item in albums" :key="item.id">
									<router-link :to="'/recommend/playlistMoreSingle?id=' + item.id">
										<div class="img">
											<img :src="item.Image" alt="" />
										</div>
										<div class="font">
											<p>{{ item.Info }}</p>
										</div>
										<!-- <span><i class="iconfont icon-play"></i></span> -->
									</router-link>
								</li>
							</div>
							<!-- <div class="swiper-pagination swiper-pagination-01"></div> -->
						</div>
					</ul>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import {
		getBanner,
		getPersonalizedr,
		getAlbum
	} from "../api/recommend";

	import Swiper from "swiper";
	import navs from "../components/base/navs.vue";

	export default {
		components: {
			navs
		},
		data() {
			return {
				imgs: null,
				res: null,
				albums: null,
			};
		},
		methods: {
			getBannerFun() {
				getBanner().then((data) => {
					console.log(data);
					this.imgs = data.data;
				});
			},
			getPersonalizedrFun() {
				getPersonalizedr().then((data) => {
					console.log(data);
					this.res = data.data;
					this.getAlbumFun();
				});
			},
			getAlbumFun() {
				getAlbum().then((data) => {
					console.log(data);
					this.albums = data.data;
				});
			},
		},
		async created() {
			await this.getBannerFun(); //获取轮播图
			await this.getPersonalizedrFun(); //获取推荐歌单
			// this.$emit("get-style");
		},

		// 过滤器
		filters: {
			playCountData(value) {
				let tenThousand = value > 10000 ? value / 10000 : value; // 万计算
				let billion =
					tenThousand > 10000 ?
					parseInt(value / 10000) + "亿" :
					parseInt(tenThousand) + "万"; //亿计算
				return billion;
			},
		},

		mounted() {
			new Swiper(".swiper-container-01", {
				// pagination: '.swiper-pagination-01',
				slidesPerView: 3, //显示个数
				paginationClickable: true,
				observer: true,
				observeParents: true,
				spaceBetween: 7, //div之间间距
			});

			new Swiper(".swiper-container-02", {
				// pagination: '.swiper-pagination-02',
				slidesPerView: 3,
				paginationClickable: true,
				observer: true,
				observeParents: true,
				spaceBetween: 7, //div之间间距
			});
		},
	};
</script>

<style lang="less">
	.backgroundcolor {
		background-color: #0F172A;
		// margin: auto;
		// padding: auto;
		width: 100%;
		height: 100%;
	}

	.box {
		padding-bottom: 100px;

		.banner {
			&::before {
				content: "";
				display: block;
				height: 124px;
				background-color: #0F172A;
				position: absolute;
				width: 100%;
				z-index: -1;
			}

			position: relative;

			.imgs {
				position: relative;
				left: 0;
				right: 0;
				top: 0;
				margin: auto;
				width: 96%;
				border-radius: 16px;
				overflow: hidden;

				img {
					width: 100%;
				}
			}
		}

		.remLists {
			.title {
				display: flex;
				justify-content: space-between;

				p {
					height: 60px;
					line-height: 60px;
					text-indent: 5px;
					font-size: 16px;
					color: #FFFFFF;
					font-weight: bold;
				}

				.new {
					padding: 2px 10px;
					letter-spacing: 1px;
					margin-top: 16px;
					margin-right: 10px;
					height: 20px;
					line-height: 20px;
					font-size: 12px;
					font-weight: normal;
					color: #FFFFFF;
					border: 1px solid #ccc;
					border-radius: 15px;
				}
			}

			.content {
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					li {
						flex: 0 0 30%;
						position: relative;
						margin-left: 8px;
						// padding-top: 8px;
						span {
							position: absolute;
							top: 6px;
							right: 10px;
							color: #fff;
							font-size: 10px;
							
							i {
								margin-right: 4px;
								font-size: 15px;
								vertical-align: middle;
							}
						}

						.img {
							// background-color: aqua;
							min-height: 50px;
							width: 100%;
							border-radius: 16px;

							img {
								width: 100%;
								border-radius: 16px;
							}
						}

						p {
							font-size: 12px;
							color: #FFFFFF;
							line-height: 16px;
							padding: 6px;
							margin-top: 8px;
							margin-bottom: 10px;
							// 1、固定宽度（高度可有可无）：width: 195px;
							// 2、把盒子转成弹性伸缩盒子：
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 2;
							// 5、溢出隐藏：
							overflow: hidden;
							padding-bottom: 0;
							letter-spacing: 1px;
						}
					}
				}
			}

			.album {
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					li {
						flex: 0 0 30%;
						position: relative;
						margin-top: 15px;
						margin-left: 8px;

						.img {
							// background-color: aqua;
							min-height: 50px;
							width: 100%;
							border-radius: 18px;
							border: 1px solid #363942;
							box-shadow: 0 0 10px #363942;

							img {
								width: 100%;
								border-radius: 18px;
							}
						}

						.font {
							padding: 5px;
							margin-bottom: 10px;

							p {
								font-size: 12px;
								color: #FFFFFF;
								line-height: 16px;
								margin-top: 8px;
								margin-bottom: 5px;
								// margin-bottom: 10px;
								// 1、固定宽度（高度可有可无）：width: 195px;
								// 2、把盒子转成弹性伸缩盒子：
								display: -webkit-box;
								// 3、弹性盒子排列方式：垂直排列：
								-webkit-box-orient: vertical;
								// 4、规定显示几行文本：
								-webkit-line-clamp: 1;
								// 5、溢出隐藏：
								overflow: hidden;
								// padding-bottom: 0;
							}
						}

						// span {
						// 	position: absolute;
						// 	top: 80px;
						// 	left: 30px;
						// 	color: #8996B8;
						// 	font-size: 15px;
						// 	z-index: -1;

						// 	i {
						// 		font-size: 100px;
						// 	}
						// }
					}
				}
			}
		}
	}
</style>
